<script setup>
import { ref, onMounted } from "vue";
import {
  addClassListService,
  getCourseListService,
  editClassService,
  getTeacherListService,
} from "@/api/user.js";
const DrawerVisible = ref(false);
const defaultForm = {
  code: "",
  year: "",
  major: "",
  courses: [],
  count: "",
};
const courseData = ref([]);
const teacherData = ref([]);
const getCourseList = async () => {
  const res = await getCourseListService();
  courseData.value = res.data.course;
};
const getTeacherList = async () => {
  const res = await getTeacherListService();
  teacherData.value = res.data.teacher;
}

onMounted(() => {
  getCourseList();
  getTeacherList();
});

const formModel = ref({ ...defaultForm });

const open = async (row) => {
  DrawerVisible.value = true;
  formModel.value = { ...row };
};

defineExpose({
  open,
});
const emit = defineEmits(["success"]);
const onSubmit = async () => {
  if (formModel.value._id) {
    await ElMessageBox.confirm("你确认编辑吗", "温馨提示", {
      type: "warning",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    });
    await editClassService({ id: formModel.value._id, banji: formModel.value });
    ElMessage.success("编辑成功");
    DrawerVisible.value = false;
    emit("success", "edit");
  } else {
    await ElMessageBox.confirm("你确认添加吗", "温馨提示", {
      type: "warning",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    });
    await addClassListService({ banji: formModel.value });
    ElMessage.success("添加成功");
    DrawerVisible.value = false;
    emit("success", "add");
  }
  DrawerVisible.value = false;
};
</script>
<template>
  <el-drawer
    v-model="DrawerVisible"
    :title="formModel._id ? '编辑班级' : '添加班级'"
    direction="rtl"
    size="50%"
  >
    <el-form label-width="100px" :model="formModel" ref="form">
      <el-form-item label="入学年份" prop="year">
        <el-input
          v-model="formModel.year"
          placeholder="请输入入学年份"
        ></el-input>
      </el-form-item>
      <el-form-item label="专业名称" prop="major">
        <el-input
          v-model="formModel.major"
          placeholder="请输入专业名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="班级编号" prop="code">
        <el-input
          v-model="formModel.code"
          placeholder="请输入班级编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="相关课程" prop="courses">
        <el-select
          value-key="_id"
          v-model="formModel.courses"
          class="m-2"
          placeholder="请选择课程"
          multiple
        >
          <el-option
            v-for="item in courseData"
            :key="item._id"
            :label="item.name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任" prop="teacher">
        <el-select
          value-key="_id"
          v-model="formModel.teacher"
          class="m-2"
          placeholder="请选择班主任"
        >
          <el-option
            v-for="item in teacherData.filter((item) => item.charger == true)"
            :key="item._id"
            :label="item.name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学生人数" prop="count">
        <el-input
          v-model="formModel.count"
          placeholder="请输入学生人数"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit" type="primary">提交</el-button>
        <el-button @click="DrawerVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>